import { getPermissionListApi } from '@/services/api';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { isEqual } from 'lodash';
import React, { useRef, useState } from 'react';
import CreateAuthCodeConfig from '../CreateAuthCodeConfig';
import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';

const AuthsDict: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const [clientDrawerParams, setclientDrawerParams] = useState({
    open: false,
    info: {},
  });

  const columns: any = [
    {
      title: '权限名',
      dataIndex: 'title',
      hideInSearch: true,
    },
    {
      title: '权限码',
      dataIndex: 'code',
      hideInSearch: true,
    },

    // {
    //   title: '操作',
    //   valueType: 'option',
    //   key: 'option',
    //   fixed: 'right',
    //   width: 110,
    //   render: (text: any, record: any) => [
    //     <a
    //       key="editable"
    //       onClick={() => {
    //         setclientDrawerParams({
    //           open: true,
    //           info: {
    //             ...record,
    //             auths: record?.permissions,
    //             user: record?.user?.id,
    //           },
    //         });
    //       }}
    //     >
    //       编辑
    //     </a>,
    //     <Popconfirm
    //       key="bofan"
    //       title={`确定删除该权限吗？`}
    //       onConfirm={async () => {
    //         try {
    //           await delectPermissionApi(record?.id);
    //           message.success('删除成功');
    //           actionRef.current?.reload();
    //         } catch (error) {}
    //       }}
    //       okText="Yes"
    //       cancelText="No"
    //     >
    //       <Button className="_common_card_left_item_btn" type="link" danger>
    //         删除
    //       </Button>
    //     </Popconfirm>,
    //   ],
    // },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        request={async () => {
          const { data } = await getPermissionListApi();
          return {
            data: data ?? [],
            success: true,
            total: data?.length,
          };
        }}
        rowKey="id"
        search={false}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
        // 设置项空位

        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setclientDrawerParams({
                open: true,
                info: {},
              });
            }}
            type="primary"
          >
            新增权限配置
          </Button>,
        ]}
      />

      {clientDrawerParams.open && (
        <CreateAuthCodeConfig
          open={clientDrawerParams.open}
          info={clientDrawerParams.info}
          close={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });
          }}
          onFinsh={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });

            actionRef.current?.reload();
          }}
        ></CreateAuthCodeConfig>
      )}
    </>
  );
};

export default React.memo(AuthsDict, (prev, next) => isEqual(prev, next));
